<template>
  <div class="service-detail-page">
    <el-card class="service-card">
      <el-row>
        <h3>服务信息</h3>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>服务名称：</span>
          <span>{{ state.serviceDetail.name }}</span>
        </el-col>
        <el-col :span="12">
          <span>服务类型：</span>
          <span>{{ state.serviceDetail.type == '0' ? '基础服务' : '扩展服务' }}</span>
        </el-col>
      </el-row>
    </el-card>

    <!-- 无分组展示 -->
    <el-card class="service-card mt20">
      <div class="section">
        <h3>申报材料</h3>
        <el-form label-width="400px" class="mt10">
          <el-form-item v-for="(item,index) in state.form"
                        :key="index"
                        :label="item.fieldLabel + ':'">

            <!-- 输入框只读 -->
            <el-input v-if="item.fieldType === 'input'"
                      v-model="item.value"
                      disabled
                      style="width: 60%" />

            <!-- 单选只读 -->
            <span v-else-if="item.fieldType === 'radio'">
              {{
                (item.options || []).find(opt => opt.value === item.value)?.label
                || item.value
                || '-'
              }}
            </span>

            <!-- 文本域只读 -->
            <el-input v-else-if="item.fieldType === 'textarea'"
                      v-model="item.value"
                      type="textarea"
                      resize="none"
                      input-style="height:120px"
                      disabled
                      style="width: 60%" />

            <!-- 上传 → 下载 -->
            <DownLoad v-else-if="item.fieldType === 'upload'"
                      v-model="item.value" />

            <!-- 兜底 -->
            <span v-else>
              {{ item.value }}
            </span>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>

import { getCurrentInstance, reactive, watch } from 'vue';
import { querySvInfoEntity } from "/@/api/entService/serviceInfo";
import {queryFormField} from "/@/api/entService/svFormField";
import { querySvApplyFormDataBySvApplyId } from "/@/api/entService/svApplyFormData";
import DownLoad from "/@/views/common/downLoad.vue";

const { proxy }: any = getCurrentInstance();
const props = defineProps({
  svId: { type: String, default: '' },
  applyId: { type: String, default: '' }
});

interface FormField {
  fieldType: string;
  fieldName: string;
  fieldLabel: string;
  fieldShow?: string;
  requiredMark?: string;
  placeholder?: string;
  options?: any[];
  value?: any;
}

const state = reactive({
  serviceDetail: {
    name: '',
    description: '',
    process: [],
    obtained: '',
    fileId: ''
  },
  form: [] as FormField[]
});

const page = {
  init: async () => {
    try {
      // 基本信息
      const svInfoRes = await querySvInfoEntity(props.svId);
      if (!svInfoRes?.data) {
        proxy.$message.error('获取服务详情失败');
        return;
      }
      state.serviceDetail = svInfoRes.data;

      // 表单字段定义
      const formFieldRes = await queryFormField({ svId: props.svId });
      if (!formFieldRes?.data) {
        proxy.$message.error('获取表单字段失败');
        return;
      }

      let processedFields: FormField[] = formFieldRes.data.map((item: FormField) => {
        try {
          if (item.options && typeof item.options === 'string') {
            item.options = JSON.parse(item.options);
          }
        } catch (err) {
          console.error('解析字段 options 出错:', err);
        }
        return { ...item, value: '' };
      });

      // 表单值
      if (props.applyId) {
        const svApplyRes = await querySvApplyFormDataBySvApplyId(props.applyId);
        if (svApplyRes?.data) {
          svApplyRes.data.forEach((val: any) => {
            const target = processedFields.find(f => f.fieldName === val.svFieldId);
            if (target) {
              target.value = val.svFieldValue;
            }
          });
        }
      }

      state.form = processedFields;
    } catch (e: any) {
      proxy.$message.error('获取表单字段失败:' + e.message);
    }
  }
};

watch(
    () => [props.svId, props.applyId],
    () => {
      page.init();
    },
    { immediate: true }
);
</script>


<style lang="scss" scoped>
.service-detail-page {
  margin-top: 20px;
  //padding: 20px;
}

.service-card {
  width: 100%;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-name {
  font-size: 24px;
  font-weight: bold;
}

.section {
  margin-bottom: 30px;
}

h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}
</style>
